<template>
  <el-dropdown trigger="click" :hide-on-click="false" style="margin:0 5px" size="small">
    <el-button type="primary iconfont iconshaixuan"  size="small">
      <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
    </el-button>
    <el-dropdown-menu slot="dropdown" class="namicTable"  size="small" >
      <el-checkbox-group v-model="checkbox" class="project-dropdown">
        <el-dropdown-item v-for="(item,index) in checkboxVal" :key="index">
          <el-checkbox :label="item" class="down_check">{{item}}</el-checkbox>
        </el-dropdown-item>
      </el-checkbox-group>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    //表格头部
    checkboxVal: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      checkbox: [],
      key: 1,
      colData: []
    };
  },
  watch: {
    checkbox(valArr, arr) {
      let conte = this.checkboxVal.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.key = this.key + 1; // 为了保证table 每次都会重渲
      this.$emit("alter", this.key, conte);
    }
  },
  created() {
    this.checkbox = this.checkboxVal;
  }
};
</script>

<style lang="scss" scoped>
.project-dropdown {
  max-height: 300px !important;
  overflow: auto;
}
</style>